<template>
    <view class="share">
        <view :class="{'share-box': shareState}" @click="handleHiddenShare">
        </view>
        <view class="share-item" :class="{'share-show': shareState}">
            <view class="content">
                <view class="block">
                    <text class="msg">是否确定取消已想读标记</text>
                </view>
            </view>
            <view class="footer">
                <view class="quxiao" @click.stop="handleHiddenShare">取消</view>
				<view class="fenge"></view>
				<view class="queding" @click.stop="delread">确定</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            
        },
        data() {
            return {
                shareState: false,
				bookid: '',
				uid: '',
				index: '',
            };
        },
        methods: {
            // 显示
            handleShowShare(bookid,uid,index) {
                this.shareState = true;
				this.bookid = bookid;
				this.uid = uid;
				this.index = index;
            },
            // 隐藏
            handleHiddenShare() {
                this.shareState = false;
            },
			// 取消读书状态
			delread() {
				// console.log(this.bookid);
				uni.request({
				    url: 'https://www.yedushu.cn/api/delreadstate',
				    data: {
				        bookid: this.bookid,
						uid: this.uid,
				    },
					method: 'POST',
				    success: (res) => {
						console.log("999999999" +JSON.stringify(res.data));
						console.log('删除，弹出层' + this.index);
						// 调用父组件中的事件；触发书籍列表页上的事件
						uni.$emit("quxiaoreadstate",{
								index: this.index,
								readstate: null, // 删除了读书状态
							},
						);
						this.handleHiddenShare();
				    }
				});
			}
        }
    }
</script>

<style>
    .share {
        width: 100%;
        height: 100%;
    }
    .share-box {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0rpx; left: 0rpx; bottom: 0rpx; right: 0rpx;
        background-color: rgba(0, 0, 0, 0.4);
        transition: .3s;
        z-index: 999;
    }
    // 进入分享动画
    .share-show {
        transition: all 0.3s ease;
        transform: translateY(0%) !important;
    }
    // 离开分享动画
    .share-item {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        background-color: #FFFFFF;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
        transition: all 0.3s ease;
        transform: translateY(100%);
        z-index: 1999;        
    }
	.share-item .content {
		display: flex;
		flex-wrap: wrap; 				
		justify-content: center;
		align-items: center;
	}
	.share-item .block {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 150px;
	}
	.share-item .block .msg {
		font-size: 15px;
	}
	.share-item .footer {
		height: 50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #E4E7ED;
	}	
	.share-item .footer .quxiao {
		width: 50%;
		text-align: center;
		font-size: 15px;
	}
	.share-item .footer .queding {
		width: 50%;
		text-align: center;
		font-size: 15px;
	}
	.share-item .footer .fenge {
		background-color: #E4E7ED;
		width: 1px;
		height: 15px;
	}
</style>
